<template>
	<view class="status_bar" :style="`background: ${opacityVal}`">
			<!-- 这里是状态栏 -->
	</view>
	<view class="custom-head" :style="`background: ${opacityVal}; color: ${textColor}!important;`">
		<uni-icons type="back" size="20" class="icon" :color="textColor" @tap="back"></uni-icons>
		{{ title }}
	</view>
</template>

<script setup>
import { computed, toRefs } from 'vue'
const props = defineProps({ title: String, type: { type: Number, default: 1 }, 	opacity: {type: Number, default: 0},})
const color = computed(() => props.type == 1 ? '#181A1B' : '#fff')
const styleObj = computed(() => {
	return props.type == 1 
	? { color: color.value, borderBottom: '1rpx solid #E4E4E4', background: '#fff', position: 'sticky', top: 0, zIndex: 2 }
	: { color: color.value, background: 'transparent'}
})
const {opacity} = toRefs(props)
const opacityVal = computed(()=>{
	return `rgba(255,255,255, ${opacity.value})`
});
const textColor = computed(()=>{
	console.log(opacity)
	return opacity.value>0.9 ? '#333' : '#fff'})
const back = () => {
	uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.status_bar {
	position: fixed;
	top: 0;

	width: 100%;
		height: var(--status-bar-height);
		width: 100%;
}
.custom-head {
	position: fixed;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	padding-top:  var(--status-bar-height) ;//给组件加个上边距
	z-index: 1000;
}
.icon {
	position: absolute;
	left: 15rpx;
	bottom: 0rpx;
}
</style>